<template>
  <div class="main">
    <head-top :head-title="address" :appName="false">
      <template v-slot:search>
        <router-link :to="'/search/geohash'" class="link_search">
          <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
          >
            <circle
              cx="8"
              cy="8"
              r="7"
              stroke="rgb(255,255,255)"
              stroke-width="1"
              fill="none"
            />
            <line
              x1="14"
              y1="14"
              x2="20"
              y2="20"
              style="stroke: rgb(255, 255, 255); stroke-width: 2"
            />
          </svg>
        </router-link>
      </template>
    </head-top>
    <section>
      <el-carousel height="150px" :autoplay="true">
        <el-carousel-item
          v-for="(item1, index) in typeList"
          :key="index"
          class="main-menu"
        >
          <div class="type-box" v-for="item in item1" :key="item.image_url">
            <el-image
              :src="imgBaseUrl + item.image_url"
              class="type-icon"
            ></el-image>
            <div class="type-name">{{ item.title }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
    <section class="nearshop">
      <header class="nearshop-tit">
        <svg class="shop_icon">
          <use
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="#shop"
          ></use>
        </svg>
        <span class="nearshop-text">附近商家</span>
      </header>
      <shop-list></shop-list>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import headTop from "@/components/header/head.vue";
import { msiteAddress, msiteFoodTypes } from "@/api/getData";
import { useRoute, useRouter } from "vue-router";
import shopList from '@/components/common/shopList.vue'
export default defineComponent({
  components: { headTop, shopList },
  setup() {
    const $route = useRoute();
    let geohash: any = ref("");
    let address = ref("");
    let typeList = ref([]);
    geohash = $route.query.geohash;

    function spArr(arr: Array<any>, num: number): any {
      if (num == 0) return;
      //arr是你要分割的数组，num是以几个为一组
      let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
      for (let i = 0; i < arr.length; ) {
        //注意：这里与for循环不太一样的是，没有i++
        newArr.push(arr.slice(i, (i += num)));
      }
      return newArr;
    }

    msiteAddress(geohash).then((res) => {
      address.value = res.name;
    });

    const params = {
      geohash,
      group_type: "1",
      "flags[]": "F",
    };
    msiteFoodTypes(params).then((res) => {
      typeList.value = spArr(res, 8);
    });
    return {
      address,
      typeList,
      imgBaseUrl: "https://fuss10.elemecdn.com",
    };
  },
});
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.main {
  padding-top: 1.95rem;
  .link_search {
    left: 0.8rem;
    @include wh(0.9rem, 0.9rem);
    @include ct;
  }
  .main-menu {
    border-top: 0.025rem solid $bc;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    .type-box {
      padding: 0.4rem;
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .type-icon {
        width: 55%;
        margin-bottom: 0.4rem;
      }
      div {
        @include sc(0.6rem, #666);
      }
    }
  }
  .nearshop {
    border-top: 0.025rem solid $bc;
    background-color: #fff;
    margin-top: 0.4rem;
    text-align: left;

    .nearshop-tit {
      @include sc(0.6rem, #999);
      padding: 0.4rem 0.6rem;
      .shop_icon {
        fill: #999;
        margin-right: 0.4rem;
        margin-bottom: 0.2rem;
        vertical-align: middle;
        @include wh(0.6rem, 0.6rem);
      }
      .nearshop-text {
        height: 0.6rem;
      }
    }
  }

}
</style>

<style lang="scss" scoped>
@import "src/style/mixin";
.main ::v-deep.el-carousel__indicator--horizontal {
  @include wh(0.4rem, 0.4rem);
  border-radius: 0.4rem;
}
</style>
